<template>
	<view class="container">
		<view class="form">
			<uni-forms style="width: 90%;" :modelValue="formData">
				<uni-forms-item name="avatur">
					<view class="avatur">
						<view @click="chooseAvatur()" class="tupian">
							<image :src="formData.pet_avatur"></image>
						</view>
					</view>
				</uni-forms-item>
				<uni-forms-item name="type">
					<view class="item">
						<text>类型</text>
						<view class="choose">
							<view style="width: 180rpx;" @click="choosetype(index)" v-for="(item,index) in typeOptions" :key="index" :class="['choose-item',item.selected ? 'active' : '']">
								{{item.name}}
							</view>
						</view>
					</view>
				</uni-forms-item>
				<uni-forms-item name="name">
					<view class="item">
						<text>名字</text>
						<view class="input">
							<input type="text" placeholder="填写宠物名字" v-model="formData.pet_name" />
						</view>
					</view>
				</uni-forms-item>
				<uni-forms-item name="age">
					<view class="item">
						<text>岁数</text>
						<view class="input">
							<input type="number" placeholder="填写宠物岁数" v-model="formData.pet_age" />
						</view>
					</view>
				</uni-forms-item>
				<uni-forms-item name="gender">
					<view class="item">
						<text>性别</text>
						<view class="choose">
							<view @click="choosegender(index)" v-for="(item,index) in genderOptions" :key="index" :class="['choose-item',item.selected ? 'active' : '']">
								{{item.name}}
							</view>
						</view>
					</view>
				</uni-forms-item>
				<uni-forms-item name="weight">
					<view class="item">
						<text>体型</text>
						<view class="choose">
							<view @click="chooseweight(index)" v-for="(item,index) in weightOptions" :key="index" :class="['choose-item',item.selected ? 'active' : '']">
								{{item.name}}
							</view>
						</view>
					</view>
				</uni-forms-item>
				<uni-forms-item name="variety">
					<view class="item">
						<text>品种</text>
						<view class="input">
							<input type="text" placeholder="填写宠物品种" v-model="formData.pet_variety" />
						</view>
					</view>
				</uni-forms-item>
				<uni-forms-item name="introduction">
					<view class="introduction">
						<text>宠物简介</text>
						<textarea maxlength="-1" type="text" placeholder="描述一下吧" v-model="formData.pet_introduction" />
					</view>
				</uni-forms-item>
			</uni-forms>
		</view>
	</view>
	<view style="width: 100%;height: 120rpx;"></view>
	<view class="bottom">
		<view @click="updatepet()" class="button">完成</view>
		<view @click="deletepet()" style="background-color: #eb4235;color: white;" class="button">删除</view>
	</view>
</template>

<script lang="ts" setup>
	import {ref,reactive} from "vue"
	import {onLoad} from "@dcloudio/uni-app"
	import http from "@/utils/request.js"
	onLoad((e)=>{
		petindex.value=Number(e.index)
		let petlist=uni.getStorageSync('petlist')
		formData.value=petlist[petindex.value]
		typeOptions[formData.value.pet_type].selected=true
		genderOptions[formData.value.pet_gender].selected=true
		weightOptions[formData.value.pet_weight].selected=true
	})
	let formData=ref({})
	let petindex=ref(null)
	let ischange=ref(false)
	let typeOptions=reactive([
		{
			name:'猫咪',
			selected:false
		},
		{
			name:'狗狗',
			selected:false
		},
		{
			name:'其他',
			selected:false
		},
	])
	let genderOptions=reactive([
		{
			name:'女生',
			selected:false
		},
		{
			name:'男生',
			selected:false
		}
	])
	let weightOptions=reactive([
		{
			name:'小(10kg以下)',
			selected:false
		},
		{
			name:'中(10kg-30kg)',
			selected:false
		},
		{
			name:'大(30kg以上)',
			selected:false
		}
	])
	
	function choosetype(index){
		typeOptions.forEach((item)=>{
			item.selected=false;
		})
		typeOptions[index].selected=true
		formData.value.pet_type=index
	}
	function choosegender(index){
		genderOptions.forEach((item)=>{
			item.selected=false;
		})
		genderOptions[index].selected=true
		formData.value.pet_gender=index
	}
	function chooseweight(index){
		weightOptions.forEach((item)=>{
			item.selected=false;
		})
		weightOptions[index].selected=true
		formData.value.pet_weight=index
	}
	function chooseAvatur(){
		uni.chooseImage({
			count:1,
			success(res){
				formData.value.pet_avatur=res.tempFilePaths[0]
				ischange.value=true
			},
			fail(err){
				console.log(err)
			}
		})
	}
	function uploads(){
		uni.showLoading({
			title: '加载中',
			mask: true,
		})
		return new Promise((resolve,reject)=>{
			uni.uploadFile({
				url:'http://localhost:82/api/images/upload',
				filePath:formData.value.pet_avatur,
				name:'file',
				header: { "Content-Type": "multipart/form-data" },
				formData:{
					'user':formData.value.pet_order,
					'use':'pet',
					'time':Date.now()
				},
				success(result){
					uni.hideLoading()
					resolve(result)
				},
				fail(err){
					uni.hideLoading()
					reject(err)
				}
			})
		})
	}
	function update(){
		let response=http.post('/pet/updatepet',{
			pet_id:formData.value.pet_id,
			pet_avatur:formData.value.pet_avatur,
			pet_name:formData.value.pet_name,
			pet_gender:formData.value.pet_gender,
			pet_weight:formData.value.pet_weight,
			pet_age:formData.value.pet_age,
			pet_type:formData.value.pet_type,
			pet_variety:formData.value.pet_variety,
			pet_introduction:formData.value.pet_introduction,
			pet_order:formData.value.pet_order
		})
		response.then((result)=>{
			if(result.data.code===200){
				let petlist=uni.getStorageSync('petlist')
				petlist[petindex.value]=formData.value
				uni.setStorageSync('petlist',petlist)
				uni.showToast({
					title:'修改成功',
					duration:1000
				})
				setTimeout(()=>{
					uni.navigateBack()
				},1000)
			}
		})
	}
	function updatepet(){
		if(ischange.value){
			uploads().then((res)=>{
				formData.value.pet_avatur=JSON.parse(res.data).imgUrl
				update()
			})
		}else{
			update()
		}
	}
	function deletepet(){
		let response=http.post('/pet/deletepet',{pet_id:formData.value.pet_id})
		response.then((res)=>{
			if(res.data.code===200){
				let petlist=uni.getStorageSync('petlist')
				console.log(petindex.value)
				petlist.splice(petindex.value,1)
				uni.setStorageSync('petlist',petlist)
				uni.showToast({
					title:'删除成功',
					duration:1000
				})
				setTimeout(()=>{
					uni.navigateBack()
				},1000)
			}
		})
	}
</script>

<style lang="scss">
	.container{
		display: flex;
		justify-content: center;
		width: 100%;
		background-color: #ffffff;
		
		.form{
			width: 95%;
		}
	}
	.avatur{
		width: 100%;
		height: 300rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		
		.tupian{
			position: relative;
			
			image{
				width: 200rpx;
				height: 200rpx;
				border-radius: 50%;
				border:4rpx solid #f9d65e;
			}
			
			&::after{
				content: "";
				position: absolute;
				right: -10rpx;
				bottom: 10rpx;
				background-image: url("../../../static/user/camera.png");
				background-size: cover;
				width: 60rpx;
				height: 60rpx;
			}
		}
	}
	
	.item{
		display: flex;
		align-items: center;
		margin: -5rpx;
		
		text{
			font-size: 32rpx;
			margin-right: 10rpx;
			letter-spacing: 0.1em;
		}
		
		.input{
			height: 100rpx;
			flex-grow: 1;
			display: flex;
			box-sizing: border-box;
			border-radius: 20rpx;
			padding: 10rpx 20rpx;
			align-items: center;
			background-color: #fafafa;
		}
		
		.choose{
			display: flex;
			width: 85%;
			box-sizing: border-box;
			flex-wrap: wrap;
			
			&-item{
				display: flex;
				align-items: center;
				justify-content: center;
				margin:0 15rpx 5rpx 0;
				width: 240rpx;
				height: 60rpx;
				color: #b1b0b8;
				letter-spacing: 0.1em;
				border: 4rpx solid #b6b4bf;
				border-radius: 40rpx;
				
				&.active{
					border: 4rpx solid #ce6468;
					background-color: #fff6f7;
					color: #ce6468;
				}
			}
		}
	}
	
	.introduction{
		text{
			font-size: 32rpx;
			letter-spacing: 0.1em;
		}
		
		textarea{
			margin-top: 20rpx;
			height: 150rpx;
			width: 90%;
			background-color: #f6f6f6;
			border-radius: 20rpx;
			padding:20rpx;
		}
	}
	
	.bottom{
		position: fixed;
		bottom: 0;
		box-shadow: 0 -12rpx 64rpx -14rpx rgba(0, 0, 0, 0.15);
		width: 100%;
		height: 120rpx;
		background-color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;
		
		.button{
			background-color: #f8e177;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 5rpx;
			color: #090300;
			letter-spacing: 0.2em;
			width: 40%;
			height: 70%;
			border-radius: 50rpx;
			
			&:active{
				opacity: 0.7;
			}
		}
	}
</style>
